<template>

  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>专业负责人</el-breadcrumb-item>
      <el-breadcrumb-item>毕业生能力要求一级指标管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="searchForm">

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryInfo.query" placeholder="请输入指标名称或编号" clearable @clear="getCourseList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="getCourseList" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-button style="position: absolute; right: 720px" type="" @click="addDialogVisible=true">添加一级指标</el-button>
      </el-form>



      <el-dialog title="添加一级指标" :visible.sync="addDialogVisible" width="40%" @close="addDialogClose">
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">

          <el-form-item label="编号" prop="fid">
            <el-input v-model="addForm.fid"></el-input>
          </el-form-item>

          <el-form-item label="指标名称" prop="findicname">
            <el-input v-model="addForm.findicname"></el-input>
          </el-form-item>

          <el-form-item label="指标描述" prop="findicdes">
            <el-input v-model="addForm.findicdes" ></el-input>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCourseBase">确 认</el-button>
        </div>
      </el-dialog>
      <el-table :header-cell-style="{background:'#808080',color:'#FFFFFF'}" border stripe :data="List" style="width: 100%">
        <el-table-column prop="fid" label="编号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="findicname" label="一级指标名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="findicdes" label="一级指标描述" width="380" align="center">
        </el-table-column>
        <el-table-column label="修改  /  删除" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑指标" placement="top-start">
              <el-button  icon="el-icon-edit" circle @click="editCourse(scope.row.findicname)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除指标" placement="top-start">
              <el-button type="" icon="el-icon-delete" circle @click="deleteCourse(scope.row.findicname)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="二级指标" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="管理对应二级指标" placement="top-start">
              <el-button  icon="el-icon-tickets" circle @click="showCourse(scope.row.fid,scope.row.findicname)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="修改指标信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClose" append-to-body = "true">
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
          <el-form-item label="描述信息" prop="findicdes">
            <el-input v-model="editForm.findicdes" style="" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCourseInfo">修 改</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[4]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>

</template>


<script>
  export default {

    created(){
      this.getCourseList();
    },
    data() {
      return {
        queryInfo:{
          query:'',//查询信息
          role:this.$session.get('bull'),
          pageNum:1,
          pageSize:4
        },
        List:[],
        total:0,
        addDialogVisible:false,
        editDialogVisible:false,
        infoDialogVisible:false,

        addForm:{
          findicname:'',
          findicdes:'',
          fid:'',

        },
        editForm:{
          findicdes:'',
        },
        infoForm:{
          courseid:'',
          ord:'',
          coursedata:'',
          coursetime:'',
          goal:'',
          secondindicid:'',
        },
        addFormRules: {
          fid:[
            { required: true, message:'请输入编号', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          findicname: [
            { required: true, message: '请输入指标名', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],

          findicdes:[
            { required: true, message:'请输入描述', trigger: 'blur' },
            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ],

        },

        editFormRules: {
          findicdes: [
            { required: true, message: '请输入描述', trigger: 'blur' },
            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ]
        },
        infoFormRules: {

        },

      }
    },


    methods: {
      async getCourseList () {
        const { data: res } = await this.$http.get("ProfesIndicatorOnes/AllProfesIndicatorOne", { params: this.queryInfo })
        this.List = res.data;
        this.total = res.numbers;
      },
      showCourse (fid,findicname) {
        this.$session.set("fid",fid);
        this.$session.set("findicname",findicname);
        this.$router.push({path:'/Sub_info'});
      },
      async makeCourse(courseid){
        const { data: res } = await this.$http.put("Courses/CourseState?state=1&courseid="+courseid+'');
        console.log(res);
        if (res !== "success") return this.$message.error("发布失败");
        this.$message.success("发布成功");
        this.getCourseList();
      },

      editCourseInfo () {
        this.$refs.editFormRef.validate(async valid => {
          console.log(valid);
          if (!valid) return;

          const { data: res } = await this.$http.put("ProfesIndicatorOnes/ProfesIndicatorOne", this.editForm);
          console.log(res);
          if (res !== "success") return this.$message.error("修改失败");
          this.$message.success("修改成功");

          this.editDialogVisible = false;
          this.getCourseList();
        });
      },
      async editCourse(findicname){
        const {data:res} = await this.$http.get("ProfesIndicatorOnes/ProfesIndicatorOneMessage?findicname="+findicname);
        this.editForm = res;
        this.editDialogVisible = true;
      },
      async deleteCourse (findicname) {

        const confirmResult = await this.$confirm('是否删除该一级指标？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult !== 'confirm') {
          return ;
        }
        const { data: res } = await this.$http.delete("ProfesIndicatorOnes/ProfesIndicatorOne?findicname=" + findicname);
        if (res !== "success") {
          return this.$message.error("删除失败");
        }
        this.$message.success("删除成功");
        this.getCourseList();
      },
      addCourseBase () {
        this.$refs.addFormRef.validate(async valid => {
          if (!valid) return;
          const { data: res } = await this.$http.post("ProfesIndicatorOnes/ProfesIndicatorOne", this.addForm);
          if (res !== "success") {
            return this.$message.error("请不要添加重复指标！")
          }
          this.$message.success("添加成功！")
          this.addDialogVisible = false;
          this.getCourseList();
        })
      },

      handleSizeChange (newSize) {
        this.queryInfo.pageSize = newSize;
        this.getCourseList();
      },
      handleCurrentChange (newPage) {
        this.queryInfo.pageNum = newPage;
        this.getCourseList();
      },
      addDialogClose () {
        this.$refs.addFormRef.resetFields();
      },
      editDialogClose () {
        this.$refs.editFormRef.resetFields();
      },
    }
  }
</script>

<style scoped>
  .searchForm{
    margin-top: 40px;
  }
</style>
